<template>
  <view class="mob-evaluation-statistics">
    <view class="box-border pt-[5rpx] bg-white">
      <up-tabs
        :list="newsTab"
        lineColor="#0A8CFE"
        lineWidth="70rpx"
        :activeStyle="{ color: '#0A8CFE', fontSize: '29rpx' }"
        :inactiveStyle="{ color: '#000', fontSize: '29rpx' }"
        @click="onTypeItem"
      >
      </up-tabs>
    </view>
    <view class="top-line mt-[-4rpx]"></view>
    <view
      class="degree-statistics w-[100%] h-[94rpx] bg-white px-6 box-border flex flex-row items-center justify-between text-[29rpx]"
    >
      <view
        :class="queryParam.scoreStar == item.id ? 'active' : 'unactive'"
        v-for="(item, index) in degreeList"
        :key="index"
        @click="changeScoreType(item)"
        >{{ item.name }}：{{ item.num }}</view
      >
    </view>
    <template v-if="list.length">
      <view
        class="bg-white px-6 py-4 box-border mt-2.5"
        v-for="(item, index) in list"
        :key="index"
      >
        <view class="text-[29rpx]">
          <view class="mb-3.5 flex">
            <text class="text-[#8A8A8A] whitespace-nowrap">服务事项：</text>
            <text class="text-[#000000]">{{ item.itemName }}</text>
          </view>
          <view class="mb-3.5 flex">
            <text class="text-[#8A8A8A] whitespace-nowrap">总体评分：</text>
            <view class="flex flex-row items-center">
              <view>
                <up-rate
                  v-model="item.scoreStar"
                  inactiveColor="#CCCCCC"
                  activeColor="#F55300"
                  size="21"
                  count="3"
                  readonly
                ></up-rate>
              </view>
              <text class="text-[#000000] ml-3">{{
                item.scoreStar == 3
                  ? "满意"
                  : item.scoreStar == 2
                  ? "一般"
                  : item.scoreStar == 1
                  ? "不满意"
                  : ""
              }}</text>
            </view>
          </view>
          <view class="mb-3.5 flex">
            <text class="text-[#8A8A8A] whitespace-nowrap">评价内容：</text>
            <text class="text-[#000000]">{{ item.content }}</text>
          </view>
          <view class="mb-3.5 flex" v-if="item.imgUrl && item.imgUrl.length">
            <text class="text-[#8A8A8A] whitespace-nowrap"
              >图&emsp;&emsp;片：</text
            >
            <view class="flex flex-wrap">
              <up-album
                :urls="item.imgUrl"
                space="20rpx"
                singleSize="155rpx"
                multipleSize="155rpx"
                autoWrap
                :maxCount="3"
                unit="rpx"
              ></up-album>
            </view>
          </view>
          <view class="mb-3.5 flex">
            <text class="text-[#8A8A8A] whitespace-nowrap">评价人员：</text>
            <text class="text-[#000000]"
              >{{ item.appraiseUserName }}
              {{ EncryptTel(item.phonenumber) }}</text
            >
          </view>
          <view class="flex">
            <text class="text-[#8A8A8A] whitespace-nowrap">评价时间：</text>
            <text class="text-[#000000]">{{
              item.createTime
                ? dayjs(item.createTime).format("YYYY-MM-DD hh:mm:ss")
                : ""
            }}</text>
          </view>
        </view>
      </view>
    </template>
    <up-empty
      v-else
      mode="data"
      text="暂无记录"
      icon="http://cdn.uviewui.com/uview/empty/data.png"
    >
    </up-empty>
    <up-gap height="10"></up-gap>
    <up-toast ref="uToastRef"></up-toast>
  </view>
</template>

<script setup lang="ts">
import { listEvaluationCount, listEvaluation } from "@/api/evaluation/index";
import { imgPrefix } from "@/config/app";
import { EncryptTel } from "@/utils/tools";
import dayjs from "dayjs";
import { useUserInfoStore } from "@/stores/userInfo";
const userInfoStore = useUserInfoStore();

const uToastRef = <any>ref(null);
const newsTab = reactive([
  { name: "本月评价（0）" },
  { name: "全部评价（0）" },
]);
const degreeList = reactive([
  { id: 3, name: "满意", num: 8 },
  { id: 2, name: "一般", num: 2 },
  { id: 1, name: "不满意", num: 2 },
]);
const data = reactive({
  queryParam: {
    pageNum: 1,
    pageSize: 10,
    policeQueryType: 0, // 0 本月
    policeUserId: userInfoStore.userInfo.userId,
    scoreStar: <any>"",
  },
  list: <any>[],
  total: 0,
  countParam: {
    policeQueryType: 0, // 0 本月
    policeUserId: userInfoStore.userInfo.userId,
  },
});
const { queryParam, list, total, countParam } = toRefs(data);

const onTypeItem = (item: any) => {
  if (item.index === 0) {
    queryParam.value.policeQueryType = item.index;
    countParam.value.policeQueryType = item.index;
  } else {
    queryParam.value.policeQueryType = <any>"";
    countParam.value.policeQueryType = <any>"";
  }
  reRenderList();
  getEvaluationCount();
};
// 满意度筛选改变
const changeScoreType = (item: any) => {
  if (queryParam.value.scoreStar == item.id) {
    queryParam.value.scoreStar = "";
  } else {
    queryParam.value.scoreStar = item.id;
  }
  reRenderList();
};
// 获取评价数量统计
const getEvaluationCount = () => {
  listEvaluationCount(countParam.value)
    .then((res) => {
      const { data } = res;
      degreeList[0].num = data.satisfiedCount;
      degreeList[1].num = data.generalCount;
      degreeList[2].num = data.dissatisfiedCount;
      newsTab[0].name = `本月评价（${data.monthCount}）`;
      newsTab[1].name = `全部评价（${data.sumCount}）`;
    })
    .catch((err) => {
      uToastRef.value.show({
        type: "error",
        message: err,
      });
    });
};
// 获取评价列表
const getEvaluationList = () => {
  uni.showLoading({
    title: "加载中",
    mask: true,
  });
  listEvaluation(queryParam.value)
    .then((res) => {
      uni.hideLoading();
      const { data } = res;
      data.records = data.records ?? [];
      data.records = processImg(data.records);
      list.value = [...list.value, ...data.records];
      total.value = data.total;
    })
    .catch((err) => {
      uni.hideLoading();
      uToastRef.value.show({
        type: "error",
        message: err,
      });
    });
};
// 数据处理-图片
const processImg = (arr: Array<any>) => {
  if (arr.length) {
    arr = arr.map((item: any) => {
      if (item.imgUrl) {
        item.imgUrl = item.imgUrl.split(",");
        if (item.imgUrl.length) {
          item.imgUrl = item.imgUrl.map((img: any) => {
            img = imgPrefix + img;
            return img;
          });
        }
      }
      return item;
    });
  }
  return arr;
};
const reRenderList = () => {
  list.value = [];
  total.value = 0;
  queryParam.value.pageNum = 1;
  getEvaluationList();
};
const initData = () => {
  getEvaluationList();
  getEvaluationCount();
};
onLoad(() => {
  initData();
});
onReachBottom(() => {
  let allTotal = queryParam.value.pageNum * queryParam.value.pageSize;
  if (allTotal < total.value) {
    // status.value = "loading";
    queryParam.value.pageNum++;
    getEvaluationList();
  } else {
    // status.value = "nomore";
    uToastRef.value.show({
      type: "info",
      message: "暂无更多数据",
    });
    return;
  }
});
</script>

<style lang="scss" scoped>
.mob-evaluation-statistics {
  .degree-statistics {
    .active {
      color: #fff;
      background: #0a8cfe;
      border-radius: 16rpx;
      padding: 8rpx 16rpx;
    }
    .unactive {
      color: #000;
    }
  }
  /* ::v-deep .u-tabs__wrapper__nav__item-1 {
    width: 160rpx;
  } */
  ::v-deep .u-tabs__wrapper__nav__item {
    width: 50vw;
  }
  ::v-deep .u-album__row__wrapper > image {
    width: 150rpx !important;
    height: 104rpx !important;
  }
}
</style>
